<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>预警情况</title>
<!-- <link rel="stylesheet" href="scripts/bootstrap/css/bootstrap.min.css" />
	<script src="scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
	<script src="scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> -->
<script src="../js/jquery.min.js"></script>
<script>
		function alert_manage(currPage) {
			$.ajax({
				type: 'post',
				url: 'alerts/alert_manage.action',
				data: {
					currPage: currPage
				},
				dataType: 'html',
				success: function(data) {
					$("#main-content").html(data);
				}
			});
		}
		
		function alert_view(currPage) {
			$.ajax({
				type: 'post',
				url: 'alerts/alert_view.action',
				data: {
					currPage: currPage
				},
				dataType: 'html',
				success: function(data) {
					$("#main-content").html(data);
				}
			});
		}
		
	</script>
</head>

<body>
	<div style="width: 100%;">
		<h2>预警情况</h2>
		<div style="width: 600px; display: inline-block; float: left;">
			<table class="table table-bordered table-hover">
				<thead>
					<tr>
						<th>序号</th>
						<th>预警设备</th>
						<th>预警等级</th>
						<th>预警类型</th>
						<th>预警次数</th>
					</tr>
				</thead>
				<tbody>
					<c:if test="${list != null}">
						<%
							int num = (Integer) request.getAttribute("currPage");
								int i = (num - 1) * 5;
						%>
						<c:forEach items="${list}" var="item">
							<tr>
								<%
									i++;
								%>
								<td><%=i%></td>
								<td>${item.deviceName}</td>
								<td>${item.rankName}</td>
								<td>${item.typeName}</td>
								<td>${item.count}</td>
							</tr>
						</c:forEach>
					</c:if>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="5">共${totalRows}条记录,${currPage}/${totalPage}页 <a
							href="javascript:void(0);" onclick="alert_situation(1)">第一页</a> <a
							href="javascript:void(0);"
							onclick="alert_situation(${currPage-1})">上一页</a> <a
							href="javascript:void(0);"
							onclick="alert_situation(${currPage+1})">下一页</a> <a
							href="javascript:void(0);"
							onclick="alert_situation(${totalPage})">最末页</a>
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
		<div
			style="display: inline-block; float: left; margin-left: 20px; padding-top: 10px;">
			<p>
				<button class="btn" onclick="alert_manage(1)">未处理预警</button>
			</p>
			<p>
				<button class="btn" onclick="alert_view(1)">历史记录</button>
			</p>
		</div>
	</div>
</body>
</html>